<template>
	<view class="index f16 c0">
		<vipInfo :payVip="payVip" @handvipUser="vipUser = true" @vip="vip" />
		<view class="bf bs6 p10 f14 m10">
			<view class="dfbc p-10-0">
				<text>排序</text>
				<view class="tar">
					<u--input v-model="form.sort" disabledColor="#ffffff" placeholder="请输入排序" border="none" type="number">
					</u--input>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>酒品名称</text>
				<view class="tar">
					<u--input v-model="form.name" disabledColor="#ffffff" placeholder="请输入酒品名称" border="none">
					</u--input>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>酒品图片</text>
				<view class="dfa">
					<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							uploadIcon="plus"
							name="1"
							:maxCount="1"
						></u-upload>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>单位</text>
				<view class="dfa ">
					<u--input v-model="form.unit" disabledColor="#ffffff" placeholder="请输入单位" border="none">
					</u--input>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>有效期</text>
				<view class="dfa">
					<u--input v-model="form.day" disabledColor="#ffffff" placeholder="请输入有效期" border="none" type="number">
					</u--input>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>说明</text>
				<view class="dfa ">
					<u--input v-model="form.desc" disabledColor="#ffffff" placeholder="请输入备注信息" border="none">
					</u--input>
				</view>
			</view>
		</view>
		<u-action-sheet :show="showArea" :actions="areaList" @close="showArea = false" @select="selectArea">
		</u-action-sheet>
		<u-action-sheet :show="showType" :actions="typeList" @close="showType = false" @select="selectType">
		</u-action-sheet>
		<view class="buts bf5">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="save">添加酒品</view>
			</view>
			<view class="c8 tac pb15 f14" @click="cancel">取消</view>
		</view>
		<u-modal :show="vipUser" :negativeTop="200" title="会员查询" confirmText="查询" showCancelButton
			confirmColor="#FD8906" cancelColor="#000" @confirm="search" @cancel="vipUser = false"
			@close="vipUser = false" zoom>
			<view class="slot-content">
				<u--input v-model="phone" type="number" placeholderClass="inni" placeholderStyle="color:#c1c1c1"
					placeholder="请输入手机号" border="none"
					:customStyle="{'width':'100%','flex':1,'background': '#f6f6f6','padding': '10px 15px',}" clearable>
				</u--input>
			</view>
		</u-modal>
		<member ref="memberRef" @chooseMember="chooseMember" />
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import member from '@/components/user/member.vue';
	import site from '@/custom/siteroot.js';
	import config from '@/custom/config.js';
	export default {
		components: {
			member,
		},
		data() {
			return {
				vipUser:false,
				phone:'',
				form: {
					sort:'',
					name:'',
					logo:'',
					unit:'',
					day:'',
					desc:'',
				},
				
				subColor: uni.getStorageSync('subject_color'),
				showArea: false,
				showType: false,
				areaList: [],
				typeList: [],
				areaName:'',
				typeName:'',
				fileList1:[],
				id:'',
			}
		},
		onLoad(options) {
			this.getTableArea()
			if(options && options.id){
				this.id = options.id
				this.getInfo(options.id)
			}
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async getInfo(id){
				const {
					data
				} = await this.beg.request({
					url: `${this.api.drinks}/${id}`,
				})
				this.form = data ? data : {}
				if(this.form && this.form.logo){
					this.fileList1 = []
					this.fileList1.push({
						url:this.form.logo
					})
				}
			},
			async getTableArea() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.drinks,
					data: {
						pageSize: 999
					}
				})
				list.forEach((item) => {
				    item.name = item.name + `(单位:${item.unit})`;
				})
				this.areaList = list ? list : []
			},
			selectArea(e) {
				this.form.drinksId = e.id
				this.areaName = e.name
			},
			selectType(e) {
				this.form.typeId = e.id
				this.typeName = e.name
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${uni.getStorageSync('siteroot')}/channel/file/upload`,
						filePath: url,
						name: 'file',
						header: {
							contentType: config.contentType,
							appType: 'store',
							uniacid:  uni.getStorageSync('uniacid'),
							storeId: uni.getStorageSync('storeId'),
							Authorization: `Bearer ${uni.getStorageSync('token')}`,
						},
						success: (res) => {
							let r = JSON.parse(res.data)
							if(r && r.code==400){
								uni.showToast({
									title: r.msg || r.code,
									icon: 'none',
									duration: 2000
								})
							}else{
								setTimeout(() => {
										let d = JSON.parse(res.data)
										resolve(d.data)
									}, 500)
							}
						}
					});
				})
			},
			async save() {
				if(this.fileList1.length){
					this.form.logo = ''
					this.fileList1.forEach(v =>{
						this.form.logo = v.url
					})
				}else{
					this.form.logo = ''
				}
				// this.form.storeId = this.storeId
				if(!this.form.name){
					return uni.$u.toast('请输入酒品名称');
				}else if(!this.form.unit){
					return uni.$u.toast('请输入酒品单位');
				}else if(!this.form.day){
					return uni.$u.toast('请输入酒品有效期');
				}
				const {
					msg,code
				} = await this.beg.request({
					url: this.form.id ? `${this.api.drinks}/${this.form.id}` : this.api.drinks,
					method: this.form.id ? 'PUT' : 'POST',
					data:this.form
				})
				if(code && code==200){
					uni.showToast({
					  title: msg
					}).then(()=>{
						setTimeout(() => {
						 uni.navigateTo({
						 	url: `/pages/order/wineStock/index`
						 })
						}, 600);
					})
				}else{
					uni.$u.toast(msg)
				}
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dfbc /deep/.u-input__content__field-wrapper__field {
		text-align: right !important;
	}

	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	/deep/.u-action-sheet__item-wrap__item {
	    flex-direction: row !important;	
	}
	/deep/.u-action-sheet__item-wrap__item__subname {
	    margin-top: 0!important;
		margin-left: 5px;
	}
	
	.m10{
		margin: 20rpx;
	}
	.slot-content {
		width: 100%;
	}
</style>